<template>
  <div>
    <!-- <SecHeader /> -->

    <!-- <div class="content">
      <div class="center">
        <div class="choseTab">
          <div>
            <a-dropdown :trigger="['click']">
              <a @click.prevent> {{ packTaskList[curPack]?.batchNo }} </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-for="(item, index) in packTaskList" :key="item.id"
                    @click="() => changeCur(item, index)">
                    <a href="javascript:;">{{ item.batchNo }}</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>

        <div class="infos">
          <div class="infoText">
            <div class="mp4-p">
                <video v-if="title1 == '种子期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/1.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '萌芽期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/2.mp4" type="video/mp4" />
                </video>

                <video v-if="title1 == '开花期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/3.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '膨大期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/4.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '采收期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/5.mp4" type="video/mp4" />
                </video>

                <div class="mp4-mask"></div>
              </div>
            <div class="infotitle">{{ title1 }}</div>
            <div class="infocontent">
              {{ desc1 }}
            </div>
          </div>
          <div class="infoTabs">
            <div v-for="(item, index) in data1" 
            @click="select(index)"
            :class="{active: item.title == title1}" class="tab">
              <div class="text-div">{{ item.title }}</div>
            </div>
            
          </div>
        </div>
      </div>
      <div class="left">
        <LeftUp :plantTaskId="plantTaskId" class="left_up" />
        <LeftDown :curPackId="curPackId" class="left_down" />
      </div>
      <div class="right">
        <RightUp :curPackId="curPackId" class="right_up" />
        <RightDown class="right_down" />
      </div>
    </div> -->
  </div>
</template>

<script setup>
import SecHeader from "../../components/SecHeader.vue";

import { ref, onMounted, onActivated } from "vue";
import LeftUp from "./component/LeftUp.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightDown from "./component/RightDown.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { useBaseStore } from "@/stores/base";
import { useLandStore } from "@/stores/land";
const baseStore = useBaseStore()
const landStore = useLandStore()
const curPack = ref(0);
const curPackId = ref("");
const plantTaskId = ref('')

let packTaskList = ref([]);

const title1 = ref('')
const desc1 = ref('')

const data1 = ref([
  {
    title: '种子期',
    desc: '太子参种子体型小，椭圆形，长3mm，宽2mm，厚1~4mm，种皮褐红色，表面密生瘤刺状突起，呈同心圆状排列。种脐在种子的腹面基部。胚乳为显著的淀粉质，胚弯曲，位于胚乳的中央。'
  },
  {
    title: '萌芽期',
    desc: '栽种后，待气温逐渐下降到15℃，土温10℃时，种参开始缓慢发芽、发根。该阶段经过越冬，到幼苗出土为止。期间生长缓慢，主要依靠种参贮存的养分，因而要求种参肥大，基肥充足。'
  },
  {
    title: '开花期',
    desc: '翌年2月出苗后，植株生长逐步增快，并进入现蕾、开花、结果等过程。这时地上部形成分枝，植株生物量增加。地下茎逐节发根、伸长、膨大，块根数量增多，干重增加。到芒种，植株生长量达最高峰。这时是植株生长繁茂的主要时期，亦是植株吸收、制造和积累养分的关键时期。'
  },
  {
    title: '膨大期',
    desc: '块根膨大阶段 从4月中旬开始，不定根的数量、长度显著增加，并且膨大，至6月中旬进入休眠期为止，这是形成块根产量的主要时期。块根干重高峰的出现，比地上部分干重的高峰稍迟，因而加强肥水管理，促进与延长植物旺盛生长，对提高量十分重要。'
  },
  {
    title: '采收期',
    desc: '芒种以后叶片开始枯黄脱落，到夏至地上部植株枯死，新参在土开始相互散开，进入休眠越夏阶段。夏至至小暑，植株枯萎倒苗时块根已长成，应及时收获。过早或过晚采收，块根粉质少，出干率低，质量也差；延期收获，则常因雨水过多造成腐烂。'
  },
])

const select = (index) => {
  title1.value = data1.value[index].title
  desc1.value = data1.value[index].desc
}

onMounted(async () => {
  select(0)

  let baseId = baseStore.base.id
  let landId = landStore.land.id

  let params = { baseId: baseId };
  // if (landId) {
  //   params.landId = landId;
  // }

  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/pack/task/list",
    method: "get",
    params: params,
  });


  packTaskList.value = res.data;
  curPackId.value = res.data[0].id;
  plantTaskId.value = res.data[0].plantTaskId
});

const changeCur = (item, index) => {
  curPack.value = index;
  curPackId.value = packTaskList.value[index].id;
  plantTaskId.value = packTaskList.value[index].plantTaskId
};


onActivated(() => {
  let video = document.querySelectorAll('video')
  console.log(video)
  for (let item of video) {
    item.play()
  }
})
</script>

<style scoped lang="scss">
.choseTab {
  display: flex;
  align-items: center;
  margin: vh(30) vw(30) vh(20);

  >div {
    min-width: vw(106);
    height: vh(31);
    line-height: vh(31);
    border-radius: vh(6);
    border: vh(1) solid #19f7ff;

    font-weight: 400;
    font-size: vh(14);
    color: #fff;
    text-align: center;
    margin-right: vh(10);
    background: rgba(50, 200, 167, 0.45);

    cursor: pointer;
    padding: 0 20px;
  }

  >.active {
    border-radius: vh(6);
    color: #ffffff;
    border: vh(1) solid #57f5a1;
    background: rgba(20, 74, 88, 0.57);
  }
}

.infos {
  width: vw(518);
  height: vh(568);
  background-image: url("@/assets/halfframe.png");
  background-size: vw(518) vh(568);
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: start;
  justify-content: space-between;

  margin-left: vw(30);

  .infotitle {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: vw(14);
    line-height: vw(40);
    background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 63.525390625%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
  }

  .infocontent {
    width: 20vw;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: vw(11);
    color: #2cd7bc;
    line-height: vw(28);
   
  }

 
}
.infoText{
  padding: 2vw 0 0 5vw;
}
.tab {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: vw(85);
  height: vw(76);
  box-sizing: border-box;
  background-image: url("@/assets/polygonchose.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: vh(18) 0;
  cursor: pointer;


  font-weight: 800;
  font-size: vw(12);
  color: #fff;
  
}
.text-div{
  background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 63.525390625%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.active {
  background-image: url("@/assets/polygon.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 27%;
}

.left_up {
  /* margin: 10px;
  height: 375px; */
  margin: vh(10) vw(10);
  height: vh(350);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(350);
}

.center {
  /* flex-grow: 1; */
  width: 46%;
}

.right {
  width: 27%;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(350);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(350);
}

.mp4-p {
  height: 30vh;
  position: relative;
 
}

.mp4-video {
  width: 100%;
  height: 100%;
}

.mp4-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

</style>